﻿<!DOCTYPE html>
<html lang="en">
<head>
    <#--<meta http-equiv="content-type" content="text/html;charset=UTF-8">-->
    <#--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->

    <title>jQuery在线考试倒计时界面</title>

    <link href="/qd/css/main.css" rel="stylesheet">
    <link href="/qd/css/iconfont.css" rel="stylesheet">
    <link href="/qd/css/test.css" rel="stylesheet">

    <script src="/qd/jq/jquery-1.11.3.min.js"></script>
    <script src="/qd/jq/jquery.easy-pie-chart.js"></script>
    <!--时间js-->
    <script src="/qd/jq/jquery.countdown.js"></script>

    <script type="text/javascript" src="/qd/jq/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/qd/jq/jquery.easy-pie-chart.js"></script>
    <script type="text/javascript" src="/qd/jq/jquery.countdown.js"></script>
        <#--<script type="text/javascript" src="/qd/jq/bootstrap.min.js"></script>-->
    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }

            .reading h2 a {
                text-decoration: none;
                color: #59595b;
                font-size: 20px;
            }

                .reading h2 a:hover {
                    color: #2183f1;
                }

    </style>



    <script>
        window.jQuery(function ($) {
            "use strict";

            $('time').countDown({
                with_separators: false
            });
            $('.alt-1').countDown({
                css_class: 'countdown-alt-1'                            /*设置时间的倒计时*/
            });
            $('.alt-2').countDown({
                css_class: 'countdown-alt-2'
            });

        });


        $(function () {
            $('textarea.1').click(function () {                /*当你点击一个答案*/
                debugger;
                var examId = $(this).closest('.test_content_nr_tt').closest('li').attr('id');          // 得到题目ID，得到最靠近的'.test_content_nr_main'后，再得到最靠近的li的id属性的值
                var cardLi = $('a[href=#' + examId + ']');          // 根据题目ID找到对应答题卡，a标签的href属性是#XXXX的
                // 设置已答题
                if (!cardLi.hasClass('hasBeenAnswer')) {                    /*如果题目被选过了，找到的答题卡就变色*/
                    cardLi.addClass('hasBeenAnswer');
                }

            });
        });

        $(function () {
            $("input[value='取消标记']").click(function () {                /*取消标记按钮*/

                debugger;
                var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');          // 得到题目ID，得到最靠近的'.test_content_nr_main'后，再得到最靠近的li的id属性的值
                var cardLi = $('a[href=#' + examId + ']');          // 根据题目ID找到对应答题卡，a标签的href属性是#XXXX的
                // 设置已答题
                if (cardLi.hasClass('hasBeenAnswer')) {                    /*如果题目被选过了，找到的答题卡就变色*/
                    cardLi.removeClass("hasBeenAnswer");            //去除这个class
                }

            });
        });

//
//        $(function () {
//            $("#test_jiaojuan").click(function () {                /*当你点击交卷*/
//
//
//            });
//        });

        function ret(){
            if(confirm("您确认交卷吗？")) {

                return true;
            }

            return false;
        }
    </script>

    <script>  //根据textarea 标签内容自适应高度
    window.onload = function() {                        //页面加载完后调用
        $.each($("textarea"), function (i, n) {
            $(n).css("height", n.scrollHeight + "px");
        });


        a3();                   //时间倒计时
    };


    //在number小于10的数组前补0
    function checkTime(i){
        if(i<10){
            i="0"+i;
        }
        return i;
    }


    //3
    function a3(){
        var date=new Date();//获取当前时间(包括日期)
        var startTime= "${startTime}";  //开始时间
//        var testTime="7500000";//两小时零五分 2*60*60+5*60
        var testTime="3600000";//五分钟
        var lefttime = testTime-(date-new Date(startTime).getTime());   //考试时间-（当前时间-开始时间）=倒计时

        var d,h,m,s;
        if(lefttime>0){
//            d=Math.floor(lefttime/1000/60/60/24);  //天
            h=checkTime(Math.floor(lefttime/1000/60/60%24));  //时
            m=checkTime(Math.floor(lefttime/1000/60%60));  //分
            s=checkTime(Math.floor(lefttime/1000%60));     //秒
//            lefttime=lefttime-1000; //每次进来将总时间减去1秒

            document.getElementById("sy").innerHTML=" "+h+":"+m+":"+s;
            document.getElementById("sy1").innerHTML=" "+h+":"+m+":"+s;

            var myTimer=setTimeout("a3()",1000);
        }else{
            document.getElementById("sy").innerHTML="跳转";
            document.getElementById("form").submit();

        }


    }
    </script>
</head>

<body>

<div style="margin-top:8px;">
    <#--<font id="sy" color="red" >倒计时</font>-->
</div>




    <div class="main">



        <!--nr start-->
        <div class="test_main">
            <div class="nr_left">
                <div class="test">

                    <form action="/answer/addAnswer" id="form" method="post" onsubmit="return ret()">

                        <input name="studentId" value="${user_session.id}" type="hidden">
                        <input name="testPaperId" value="${testPaperId}" type="hidden">
                        <input name="state" value="1" type="hidden">
                <div class="test_content_nr">
                    <ul>




                        <#list studentList as stu> <#--遍历stuList-->




                                <div class="test_content">
                                    <div class="test_content_title">
                                        <h2>${stu.type}</h2>                                                                <#--题型-->
                                        <p>
                                            </span><span>合计</span><i class="content_fs">${stu.score}</i><span>分</span>             <#--几道题，合计共多少分-->
                                        </p>
                                    </div>
                                </div>



                            <li id="${stu.type}">
                                <div class="test_content_nr_tt">
                                    <i>${stu.type}</i><span>(${stu.score}分)</span><textarea readonly wrap="hard" cols="100" rows=1 style="border:0px">${stu.question}</textarea><b class="icon iconfont"></b>                <#--第一道题-->
                                </div>

                                <div class="test_content_nr_tt">
                                   <textarea readonly wrap="hard" cols="100" rows=1 style="border:0px">${stu.options}</textarea><b class="icon iconfont"></b>                <#--第一道题-->
                                </div>

                                <div class="test_content_nr_tt">
                                    <textarea wrap="hard" cols="100" rows=10 class="1" name="<#if stu.type=="作文">writing<#elseif stu.type=="听A">listeningA<#elseif stu.type=="听B">listeningB<#elseif stu.type=="听C">listeningC<#elseif stu.type=="选词">gapFilling<#elseif stu.type=="匹配">informationMatching<#elseif stu.type=="阅A">readingA<#elseif stu.type=="阅B">readingB<#elseif stu.type=="翻译">translation</#if>"></textarea><b class="icon iconfont"></b>                <#--第一道题-->
                                </div>

                                <div class="test_content_nr_main">
                                    <input type="button" id="b1" value="取消标记"> </input>

                                </div>
                            </li>



                        </#list>



                    </ul>
                </div>



                        <div class="test_title">
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b id="sy" color="red" >倒计时</b>            <#--交卷旁边的倒计时-->
                            </p>
                            <font><input type="submit" name="test_jiaojuan" id="test_jiaojuan" value="交卷"></font>                  <#--交卷按钮-->
                        </div>


                    </form>
                </div>

            </div>





            <div class="nr_right">
                <div class="nr_rt_main">
                    <div class="rt_nr1">


                        <div class="rt_nr1_title">
                            <h1>
                                <i class="icon iconfont">&#xe692;</i>答题卡                        <#--答题卡-->
                            </h1>
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b id="sy1" color="red" >倒计时</b>               <#--右上角的倒计时-->
                            </p>
                        </div>



                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>单选题</h2>                                                            <#--答题卡上的单选跳转按钮-->
                                <p>
                                    <span>共</span><i class="content_lit">9</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>


                                    <#list studentList as stu> <#--遍历stuList-->
                                        <li><a href="#${stu.type}">${stu.type}</a></li>             <#--直接跳到试卷-->
                                    </#list >
                                </ul>
                            </div>
                        </div>



                    </div>

                </div>
            </div>
        </div>
        <!--nr end-->


        <div class="foot"></div>

       
    </div>








</body>

</html>


